<template>
  <view class="member-page">

    <!-- 会员头部横幅 -->
    <view class="member-banner relative">
    
      
      <view class="banner-content">
        <h2 class="banner-title">无人机专属会员</h2>
        <p class="banner-desc">解锁专业飞行功能，享受专属折扣与服务</p>
        
        <view class="benefit-tags">
          <view class="tag-item" v-for="(tag, index) in benefitTags" :key="index">
            <uni-icons :type="tag.icon" size="16" class="tag-icon"></uni-icons>
            <span class="tag-text">{{ tag.text }}</span>
          </view>
        </view>
      </view>
    </view>

    <!-- 会员套餐 -->
    <view class="packages-section">
      <view class="section-header">
        <h3 class="section-title">会员套餐</h3>
        <p class="section-subtitle">选择适合你的会员等级</p>
      </view>
      
      <view class="packages-container">
        <!-- 月度套餐 -->
        <view class="package-card" :class="{ active: selectedPackage === 'monthly' }" @click="selectPackage('monthly')">
          <view class="package-header">
            <h4 class="package-name">月度会员</h4>
            <p class="package-desc">灵活体验，随时续费</p>
          </view>
          
          <view class="package-price">
            <span class="price-number">¥39</span>
            <span class="price-unit">/月</span>
          </view>
          
          <view class="package-features">
            <view class="feature-item" v-for="(feature, index) in monthlyFeatures" :key="index">
              <uni-icons type="checkmark" size="16" class="feature-icon"></uni-icons>
              <span class="feature-text">{{ feature }}</span>
            </view>
          </view>
          
          <button class="package-btn" :class="{ active: selectedPackage === 'monthly' }">
            选择此套餐
          </button>
        </view>
        
        <!-- 年度套餐（推荐） -->
        <view class="package-card recommended" :class="{ active: selectedPackage === 'yearly' }" @click="selectPackage('yearly')">
          <view class="recommended-tag">推荐</view>
          
          <view class="package-header">
            <h4 class="package-name">年度会员</h4>
            <p class="package-desc">最具性价比选择</p>
          </view>
          
          <view class="package-price">
            <span class="price-number">¥399</span>
            <span class="price-unit">/年</span>
            <span class="price-saving">省¥69</span>
          </view>
          
          <view class="package-features">
            <view class="feature-item" v-for="(feature, index) in yearlyFeatures" :key="index">
              <uni-icons type="checkmark" size="16" class="feature-icon"></uni-icons>
              <span class="feature-text">{{ feature }}</span>
            </view>
          </view>
          
          <button class="package-btn primary" :class="{ active: selectedPackage === 'yearly' }">
            选择此套餐
          </button>
        </view>
        
        <!-- 终身套餐 -->
        <view class="package-card" :class="{ active: selectedPackage === 'lifetime' }" @click="selectPackage('lifetime')">
          <view class="package-header">
            <h4 class="package-name">终身会员</h4>
            <p class="package-desc">一次性付费，永久使用</p>
          </view>
          
          <view class="package-price">
            <span class="price-number">¥1999</span>
            <span class="price-unit">/终身</span>
          </view>
          
          <view class="package-features">
            <view class="feature-item" v-for="(feature, index) in lifetimeFeatures" :key="index">
              <uni-icons type="checkmark" size="16" class="feature-icon"></uni-icons>
              <span class="feature-text">{{ feature }}</span>
            </view>
          </view>
          
          <button class="package-btn" :class="{ active: selectedPackage === 'lifetime' }">
            选择此套餐
          </button>
        </view>
      </view>
    </view>

    <!-- 会员权益 -->
    <view class="benefits-section">
      <view class="section-header">
        <h3 class="section-title">会员专属权益</h3>
        <p class="section-subtitle">成为会员，享受以下全部权益</p>
      </view>
      
      <view class="benefits-grid">
        <view class="benefit-card" v-for="(benefit, index) in benefits" :key="index" @click="showBenefitDetail(benefit)">
          <view class="benefit-icon" :class="'icon-' + index">
            <uni-icons :type="benefit.icon" size="28"></uni-icons>
          </view>
          <h4 class="benefit-title">{{ benefit.title }}</h4>
          <p class="benefit-desc">{{ benefit.desc }}</p>
        </view>
      </view>
    </view>

    <!-- 用户评价 -->
    <view class="reviews-section">
      <view class="section-header">
        <h3 class="section-title">会员真实评价</h3>
        <p class="section-subtitle">看看其他飞手怎么说</p>
      </view>
      
      <view class="reviews-slider" @touchstart="touchStart" @touchend="touchEnd" @touchmove="touchMove">
        <view class="reviews-track" :style="{ transform: `translateX(${sliderOffset}px)` }">
          <view class="review-card" v-for="(review, index) in reviews" :key="index">
            <view class="review-header">
              <img :src="review.avatar" alt="用户头像" class="review-avatar">
              <view class="review-user">
                <p class="user-name">{{ review.name }}</p>
                <view class="user-rating">
                  <uni-icons type="star" size="16" class="star-icon" v-for="(star, i) in 5" :key="i" :color="i < review.rating ? '#FFD700' : '#EEEEEE'"></uni-icons>
                </view>
              </view>
            </view>
            <p class="review-content">{{ review.content }}</p>
            <p class="review-date">{{ review.date }}</p>
          </view>
        </view>
      </view>
      
      <view class="slider-dots">
        <view class="dot" :class="{ active: currentDot === i }" v-for="(i) in reviewDots" :key="i" @click="goToSlide(i)"></view>
      </view>
    </view>

    <!-- 底部开通按钮 -->
    <view class="bottom-cta">
      <button class="subscribe-btn" @click="confirmSubscription">
        立即开通 {{ getSelectedPackageName() }}
        <uni-icons type="arrow-right" size="18" class="btn-icon"></uni-icons>
      </button>
      <p class="cta-note">开通即表示同意《会员服务协议》和《自动续费条款》</p>
    </view>

    <!-- 权益详情弹窗 -->
    <view class="benefit-modal" v-if="showBenefitModal">
      <view class="modal-overlay" @click="closeBenefitModal"></view>
      <view class="modal-content" :animation="modalAnimation">
        <uni-icons type="close" size="24" class="modal-close" @click="closeBenefitModal"></uni-icons>
        <div class="modal-icon" :class="'icon-' + currentBenefit.index">
          <uni-icons :type="currentBenefit.icon" size="40"></uni-icons>
        </div>
        <h3 class="modal-title">{{ currentBenefit.title }}</h3>
        <p class="modal-desc">{{ currentBenefit.detail }}</p>
        <button class="modal-btn" @click="closeBenefitModal">我知道了</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 选中的套餐
      selectedPackage: 'yearly',
      
      // 权益标签
      benefitTags: [
        { icon: 'tag', text: '购物8折起' },
        { icon: 'download', text: '免费素材' },
        { icon: 'headphones', text: '专属客服' },
        { icon: 'trophy', text: '会员活动' }
      ],
      
      // 套餐权益
      monthlyFeatures: [
        '商城购物9折优惠',
        '基础飞行教程',
        '社区普通权限',
        '工作日客服支持'
      ],
      
      yearlyFeatures: [
        '商城购物8折优惠',
        '全部飞行教程',
        '社区高级权限',
        '7×12小时客服',
        '年度专属礼包',
        '新品优先体验'
      ],
      
      lifetimeFeatures: [
        '商城购物7折优惠',
        '终身免费教程',
        '社区专家权限',
        '7×24小时客服',
        '终身免费升级',
        '专属定制服务',
        '优先参与测试'
      ],
      
      // 会员权益详情
      benefits: [
        {
          index: 0,
          icon: 'tag',
          title: '购物折扣',
          desc: '无人机及配件专享折扣',
          detail: '会员可享受商城所有商品8折起优惠，新品上市同步享受会员价，每年可节省数百至上千元采购费用。'
        },
        {
          index: 1,
          icon: 'book',
          title: '专业教程',
          desc: '独家飞行技巧课程',
          detail: '包含从入门到专业的全套飞行教程，无人机摄影技巧，后期处理教程，定期更新行业前沿内容。'
        },
        {
          index: 2,
          icon: 'image',
          title: '素材下载',
          desc: '海量滤镜与模板',
          detail: '数千款专业滤镜、飞行轨迹模板、视频剪辑素材免费下载，让你的作品更具专业水准。'
        },
        {
          index: 3,
          icon: 'headphones',
          title: '专属客服',
          desc: '专业技术支持',
          detail: '会员专属客服通道，优先响应，专业技术人员一对一解答问题，解决飞行中遇到的各种难题。'
        },
        {
          index: 4,
          icon: 'gift',
          title: '会员礼包',
          desc: '定期专属福利',
          detail: '年度会员每年可获得价值200元的会员礼包，包含配件优惠券、定制贴纸、飞行保险等。'
        },
        {
          index: 5,
          icon: 'users',
          title: '会员社区',
          desc: '精英飞手交流圈',
          detail: '加入会员专属社区，结识行业专家和资深飞手，分享作品，交流经验，参与线下飞行活动。'
        }
      ],
      
      // 用户评价
      reviews: [
        {
          avatar: 'https://picsum.photos/id/1012/200',
          name: '张小明',
          rating: 5,
          content: '年度会员太值了，买配件省的钱早就超过会员费了，教程也非常实用，推荐购买！',
          date: '2023-10-15'
        },
        {
          avatar: 'https://picsum.photos/id/1027/200',
          name: '李飞飞',
          rating: 4,
          content: '客服响应很及时，上次无人机出了点小问题，很快就解决了。素材库的滤镜质量很高。',
          date: '2023-10-10'
        },
        {
          avatar: 'https://picsum.photos/id/1025/200',
          name: '王航拍',
          rating: 5,
          content: '终身会员一次性投入，长期受益，新品优先体验这个权益特别棒，每次都能第一时间用到新功能。',
          date: '2023-09-28'
        },
        {
          avatar: 'https://picsum.photos/id/1074/200',
          name: '赵飞行',
          rating: 5,
          content: '作为新手，会员教程帮了我大忙，从不会飞到能拍出不错的作品，只用了一个月时间，非常推荐！',
          date: '2023-09-15'
        }
      ],
      
      // 轮播相关
      sliderOffset: 0,
      startX: 0,
      currentDot: 0,
      reviewWidth: 0,
      reviewDots: 0,
      
      // 弹窗相关
      showBenefitModal: false,
      currentBenefit: {},
      modalAnimation: {}
    };
  },
  
  onLoad() {
    // 初始化评价轮播
    this.$nextTick(() => {
      const query = uni.createSelectorQuery().in(this);
      query.select('.review-card').boundingClientRect(data => {
        this.reviewWidth = data.width + 20; // 卡片宽度 + 间距
        this.reviewDots = this.reviews.length;
      }).exec();
    });
    
    // 创建弹窗动画
    this.modalAnimation = uni.createAnimation({
      duration: 300,
      timingFunction: 'ease-out'
    });
  },
  
  methods: {
    // 返回上一页
    navBack() {
      uni.navigateBack();
    },
    
    // 选择套餐
    selectPackage(type) {
      this.selectedPackage = type;
      
      // 添加选择动画
      const el = this.$el.querySelector(`.package-card:eq(${['monthly', 'yearly', 'lifetime'].indexOf(type)})`);
      if (el) {
        el.classList.add('package-selected');
        setTimeout(() => {
          el.classList.remove('package-selected');
        }, 500);
      }
    },
    
    // 获取选中套餐名称
    getSelectedPackageName() {
      const names = {
        monthly: '月度会员',
        yearly: '年度会员',
        lifetime: '终身会员'
      };
      return names[this.selectedPackage];
    },
    
    // 确认开通
    confirmSubscription() {
      // 显示支付确认
      uni.showModal({
        title: '确认开通',
        content: `您将开通${this.getSelectedPackageName()}，确认支付吗？`,
        success: (res) => {
          if (res.confirm) {
            // 模拟支付成功
            uni.showToast({
              title: '开通成功',
              icon: 'success',
              duration: 2000
            });
            setTimeout(() => {
              uni.navigateBack();
            }, 2000);
          }
        }
      });
    },
    
    // 显示权益详情
    showBenefitDetail(benefit) {
      this.currentBenefit = benefit;
      this.showBenefitModal = true;
      
      // 弹窗动画
      this.modalAnimation.translateY(500).step();
      this.modalAnimation.translateY(0).step();
      this.modalAnimation = this.modalAnimation.export();
    },
    
    // 关闭权益详情
    closeBenefitModal() {
      // 关闭动画
      this.modalAnimation.translateY(500).step();
      this.modalAnimation = this.modalAnimation.export();
      
      setTimeout(() => {
        this.showBenefitModal = false;
      }, 300);
    },
    
    // 轮播触摸开始
    touchStart(e) {
      this.startX = e.touches[0].clientX;
    },
    
    // 轮播触摸移动
    touchMove(e) {
      const moveX = e.touches[0].clientX;
      const diff = moveX - this.startX;
      this.sliderOffset = diff - this.currentDot * this.reviewWidth;
    },
    
    // 轮播触摸结束
    touchEnd(e) {
      const endX = e.changedTouches[0].clientX;
      const diff = endX - this.startX;
      
      // 滑动距离超过1/3则切换
      if (diff > this.reviewWidth / 3 && this.currentDot > 0) {
        this.currentDot--;
      } else if (diff < -this.reviewWidth / 3 && this.currentDot < this.reviewDots - 1) {
        this.currentDot++;
      }
      
      this.sliderOffset = -this.currentDot * this.reviewWidth;
    },
    
    // 跳转到指定轮播
    goToSlide(index) {
      this.currentDot = index;
      this.sliderOffset = -this.currentDot * this.reviewWidth;
    }
  }
};
</script>

<style scoped lang="scss">
// 颜色变量
$primary: #165DFF;
$primary-light: #E8F3FF;
$primary-dark: #0E42D2;
$secondary: #36CFC9;
$accent: #722ED1;
$gold: #FFC53D;
$text-primary: #1D2129;
$text-secondary: #4E5969;
$text-tertiary: #86909C;
$bg-light: #F5F7FA;
$bg-white: #FFFFFF;
$border-light: #E5E6EB;

.member-page {
  background-color: $bg-light;
  min-height: 100vh;
  padding-top: var(--status-bar-height);
}

// 导航栏
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 16px;
  background-color: $bg-white;
  border-bottom: 1px solid $border-light;
  
  .back-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    
    &:active {
      background-color: $bg-light;
    }
  }
  
  .nav-title {
    font-size: 18px;
    font-weight: 600;
    color: $text-primary;
  }
  
  .nav-right {
    width: 40px;
  }
}

// 会员头部横幅
.member-banner {
  position: relative;
  margin: 16px;
  border-radius: 16px;
  overflow: hidden;
  color: white;
  
  .banner-bg {
    height: 180px;
  }
  
  .gradient-bg {
    background: linear-gradient(135deg, $primary 0%, $accent 100%);
  }
  
  .banner-decoration {
    position: absolute;
    width: 120px;
    height: 120px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
  }
  
  .top-right {
    top: -60px;
    right: -60px;
  }
  
  .bottom-left {
    bottom: -40px;
    left: -40px;
  }
  
  .banner-content {
    position: relative;
    padding: 24px;
    height: 100%;
    box-sizing: border-box;
  }
  
  .banner-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .banner-desc {
    font-size: 14px;
    opacity: 0.9;
    margin-bottom: 16px;
    max-width: 280px;
  }
  
  .benefit-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .tag-item {
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    
    .tag-icon {
      margin-right: 4px;
    }
  }
}

// 通用区块样式
.section-header {
  text-align: center;
  margin-bottom: 20px;
  
  .section-title {
    font-size: 20px;
    font-weight: 600;
    color: $text-primary;
    margin-bottom: 4px;
  }
  
  .section-subtitle {
    font-size: 14px;
    color: $text-tertiary;
  }
}

// 套餐区域
.packages-section {
  padding: 0 16px 24px;
  
  .packages-container {
    display: flex;
    overflow-x: auto;
    gap: 16px;
    padding-bottom: 12px;
    scroll-snap-type: x mandatory;
  }
  
  .package-card {
    flex: 0 0 280px;
    background-color: $bg-white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    scroll-snap-align: start;
    transition: all 0.3s ease;
    position: relative;
    
    &.active {
      border-color: $primary;
      box-shadow: 0 4px 16px rgba(22, 93, 255, 0.15);
    }
    
    &.recommended {
      border: 2px solid $gold;
    }
    
    &:active {
      transform: scale(0.98);
    }
  }
  
  .recommended-tag {
    position: absolute;
    top: -10px;
    right: 20px;
    background-color: $gold;
    color: $text-primary;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 12px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(255, 197, 61, 0.3);
  }
  
  .package-header {
    margin-bottom: 16px;
    
    .package-name {
      font-size: 18px;
      font-weight: 600;
      color: $text-primary;
      margin-bottom: 4px;
    }
    
    .package-desc {
      font-size: 13px;
      color: $text-tertiary;
    }
  }
  
  .package-price {
    margin-bottom: 20px;
    
    .price-number {
      font-size: 28px;
      font-weight: 700;
      color: $text-primary;
    }
    
    .price-unit {
      font-size: 14px;
      color: $text-secondary;
      margin-left: 4px;
    }
    
    .price-saving {
      display: inline-block;
      margin-left: 8px;
      font-size: 12px;
      color: #00B42A;
      background-color: rgba(0, 180, 42, 0.1);
      padding: 1px 6px;
      border-radius: 4px;
    }
  }
  
  .package-features {
    margin-bottom: 24px;
    
    .feature-item {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      font-size: 13px;
      color: $text-secondary;
      
      .feature-icon {
        color: $primary;
        margin-right: 8px;
      }
    }
  }
  
  .package-btn {
    width: 100%;
    height: 44px;
    border-radius: 22px;
    font-size: 16px;
    font-weight: 500;
    background-color: $bg-white;
    color: $primary;
    border: 1px solid $primary;
    transition: all 0.2s ease;
    
    &.active {
      background-color: $primary;
      color: white;
    }
    
    &.primary {
      background-color: $gold;
      color: $text-primary;
      border-color: $gold;
      
      &.active {
        background-color: $gold;
        color: $text-primary;
        box-shadow: 0 4px 12px rgba(255, 197, 61, 0.3);
      }
    }
    
    &:active {
      opacity: 0.9;
      transform: scale(0.98);
    }
  }
  
  .package-selected {
    animation: packageSelect 0.5s;
  }
}

// 权益区域
.benefits-section {
  padding: 24px 16px;
  background-color: $bg-white;
  
  .benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  
  .benefit-card {
    background-color: $bg-light;
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
    
    &:active {
      transform: scale(0.98);
    }
  }
  
  .benefit-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    color: white;
    
    &.icon-0 {
      background-color: $primary;
    }
    
    &.icon-1 {
      background-color: $accent;
    }
    
    &.icon-2 {
      background-color: $secondary;
    }
    
    &.icon-3 {
      background-color: #FF7D00;
    }
    
    &.icon-4 {
      background-color: #00B42A;
    }
    
    &.icon-5 {
      background-color: #722ED1;
    }
  }
  
  .benefit-title {
    font-size: 16px;
    font-weight: 600;
    color: $text-primary;
    margin-bottom: 4px;
  }
  
  .benefit-desc {
    font-size: 13px;
    color: $text-tertiary;
  }
}

// 评价区域
.reviews-section {
  padding: 24px 16px;
  background-color: $bg-light;
  
  .reviews-slider {
    overflow: hidden;
    position: relative;
    margin-bottom: 16px;
  }
  
  .reviews-track {
    display: flex;
    transition: transform 0.3s ease;
  }
  
  .review-card {
    flex: 0 0 calc(100% - 20px);
    max-width: 340px;
    background-color: $bg-white;
    border-radius: 12px;
    padding: 20px;
    margin-right: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  }
  
  .review-header {
    display: flex;
    margin-bottom: 12px;
    
    .review-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
    }
    
    .review-user {
      margin-left: 12px;
    }
    
    .user-name {
      font-size: 15px;
      font-weight: 600;
      color: $text-primary;
      margin-bottom: 4px;
    }
  }
  
  .review-content {
    font-size: 14px;
    color: $text-secondary;
    line-height: 1.5;
    margin-bottom: 12px;
  }
  
  .review-date {
    font-size: 12px;
    color: $text-tertiary;
  }
  
  .slider-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    
    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: $border-light;
      transition: all 0.3s ease;
      
      &.active {
        width: 24px;
        background-color: $primary;
      }
    }
  }
}

// 底部按钮
.bottom-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: $bg-white;
  padding: 16px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  
  .subscribe-btn {
    width: 100%;
    height: 50px;
    background-color: $primary;
    color: white;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    
    .btn-icon {
      margin-left: 8px;
    }
    
    &:active {
      background-color: $primary-dark;
      transform: scale(0.98);
    }
  }
  
  .cta-note {
    font-size: 12px;
    color: $text-tertiary;
    text-align: center;
    margin-top: 8px;
  }
}

// 权益详情弹窗
.benefit-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  
  .modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    animation: fadeIn 0.3s forwards;
  }
  
  .modal-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: $bg-white;
    border-radius: 16px 16px 0 0;
    padding: 24px;
    animation: slideUp 0.3s forwards;
  }
  
  .modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    color: $text-tertiary;
  }
  
  .modal-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: white;
  }
  
  .modal-title {
    font-size: 20px;
    font-weight: 600;
    color: $text-primary;
    text-align: center;
    margin-bottom: 16px;
  }
  
  .modal-desc {
    font-size: 15px;
    color: $text-secondary;
    line-height: 1.6;
    margin-bottom: 32px;
  }
  
  .modal-btn {
    width: 100%;
    height: 48px;
    background-color: $primary;
    color: white;
    border-radius: 24px;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.2s ease;
    
    &:active {
      background-color: $primary-dark;
    }
  }
}

// 动画效果
@keyframes packageSelect {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
</style>
    